<script setup lang="ts">

import {onMounted, ref} from 'vue'
import {useRouter} from 'vue-router'
import PageName from "@/components/PageName.vue";

const router = useRouter()
const cid = router.currentRoute.value.query.cid as string
const checkList = ref([])
import * as echarts from 'echarts'
import {getBehaviorList, getCountByAlertTypeList, getCountByDayList,getVideoUrlList} from '@/api/base.ts'
import VideoPlay from "@/components/video-play/VideoPlay.vue";

const chartPress = ref(null)
const chartFlow = ref(null)

const alarmList = ref([])
const typeList = ref([])

const _getCountByAlertTypeList = () => {
  getCountByAlertTypeList().then(res => {
    if (res.code === 200) {
      typeList.value = res.data?.map(item => {
        return {
          name: item.alertTypeName,
          value: item.count,
        }
      })
      const myChart = echarts.init(chartPress.value);
      const totalCount = typeList.value.reduce((a, c) => a + c.value, 0);
      const option = {
        tooltip: {
          trigger: 'item',
          color: '#fff'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: 0,
          top: 60,
          bottom: 20,
          textStyle: {
            color: '#fff'
          }
        },
        title: {
          text: '类型总数',
          subtext: totalCount,
          textStyle: {
            color: '#fff',
            fontSize: 15,
          },
          subtextStyle: {
            color: '#fff',
            fontSize: 16,
            align: 'center',
          },
          top: '160px',
          left: '96px',
        },
        series: [
          {
            name: '类型统计',
            type: 'pie',
            radius: ['30%', '60%'],
            avoidLabelOverlap: false,
            center: ['30%', '50%'],
            label: {
              show: false,
              position: 'center',
              color: '#fff'
            },
            labelLine: {
              show: false,
            },
            data: typeList.value
          }
        ]
      };

      option && myChart.setOption(option);
    }
  })
}
const _getBehaviorList = () => {
  getBehaviorList().then(res => {
    if (res.code === 200) {
      alarmList.value = res.data
    }
  })
}
const _getCountByDayList = () => {
  getCountByDayList().then(res => {
    if (res.code === 200) {
      const resData: any = res.data
      const fData = resData?.reduce((a, c, idx) => {
        a.legendData.push(c.name)
        if (idx === 0) {
          a.xAxisData = c.list?.map(item => item.indexDay)
        }
        a.series.push({
          name: c.name,
          type: 'line',
          data: c.list?.map(item => item.count)
        })
        return a
      }, {
        legendData: [],
        xAxisData: [],
        series: []
      })
      const myChart = echarts.init(chartFlow.value);
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        textStyle: {
          color: '#fff'
        },
        legend: {
          type: 'scroll',
          data: fData.legendData,
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: fData.xAxisData
        },
        yAxis: {
          type: 'value'
        },
        series: fData.series
      };
      myChart.setOption(option);
    }
  })

}
const videos: any = ref([])
const _getVideoUrlList=()=>{
  getVideoUrlList().then(res=>{
    if(res.code===200){
      videos.value = res.data
    }
  })
}

onMounted(() => {
  _getBehaviorList()
  _getCountByAlertTypeList()
  _getCountByDayList()
  _getVideoUrlList()
})
const back = () => {
  router.go(-1)
}
</script>

<template>
  <div class="beh-all">
    <div class="page-name">
      <img @click="back" class="public-back_img cursor-pointer" src="@/assets/publick-back.png" alt="" >
      <span @click="back" class="public-back_tit cursor-pointer">AI行为分析</span>
    </div>
    <div class="beh-left">
      <div class="beh-type">
        <div class="public-type public-list_tit"/>
        <div class="beh-type_cont">
          <div class="beh-type_bg">
            <div ref="chartPress" style="width: 100%; height: 405px;"></div>
          </div>
        </div>
      </div>
      <div class="beh-month">
        <div class="public-monthAlarm public-list_tit"/>
        <div class="beh-month_cont">
          <div class="beh-month_bg">
            <div ref="chartFlow" style="width: 100%; height: 380px;"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="beh-middle">
      <div class="public-video public-list_tit"/>
      <div class="beh-list">
        <el-scrollbar class="beh-list_cont" height="880">
          <div class="beh-li"  v-for="(item,index) in videos" :key="index">
<!--            <video width="419" controls>-->
<!--              <source :src="item.videoUrl" type="video/mp4">-->
<!--            </video>-->
<!--            <VideoPlay :height="255" :width="419" :url="item?.videoUrl"/>-->
            <iframe :src="item.videoUrl" style="width: 419px; height: 255px;border: none"></iframe>
          </div>
        </el-scrollbar>
      </div>
    </div>
        <div class="beh-right">
          <div class="public-alarm public-list_tit" />
          <el-scrollbar class="elect-alarm_list" height="928">
            <div class="elect-alarm_li" v-for="(item,index) in alarmList" :key="index">
              <div class="alarm-li_left">
                <div class="alarm-li_img">
<!--                  <img :src="item.image" alt="" >-->
                  <el-image
                      style="width: 60px; height: 60px"
                      :src="item.image"
                      :zoom-rate="1.2"
                      :max-scale="7"
                      :min-scale="0.2"
                      :preview-src-list="[item.image]"
                      show-progress
                      fit="cover"
                  />
                </div>
                <div>
                  <div class="alarm-tit">
                    <em class="alarm-num alarm-red">{{item.alertTypeName}}</em>
                    <span>{{item.deviceName}}</span>
                  </div>
    <!--              <div class="alarm-tit_desc">报警数值837.4kwh</div>-->
                </div>
              </div>
              <div class="alarm-li_date">
                {{item.captureTime}}
              </div>
            </div>
          </el-scrollbar>
        </div>
  </div>
</template>

<style scoped lang="less">
.page-name{
  position: absolute;
  top: 60px;
  left: 16px;
  display: flex;
  align-items: center;
  .public-back_img{
    width: 32px;
    height: 32px;
  }
  .public-back_tit{
    margin-left: 6px;
    color: transparent;
    background-image: linear-gradient(#EEEEEE 0%, #1EA0FF 100%);
    -webkit-background-clip: text;
    font-family: YouSheBiaoTiHei;
    font-size: 24px;
    line-height: 31px;
    font-style: normal;
    font-weight: bold;
  }
}
.beh-all {
  display: flex;

  .beh-left {
    width: 468px;
    margin-right: 21px;
  }

  .beh-middle {
    width: 913px;
  }

  .beh-right {
    width: 502px;
  }
}

.beh-list {
  padding-left: 22px;
}

.beh-list_cont {
  padding: 20px 0 52px 19px;
  overflow: hidden;

  .beh-li {
    position: relative;
    float: left;
    width: 48%;
    margin-right: 2%;
    margin-bottom: 18px;

    .bth-li_img {
      width: 100%;
      height: 100%;
    }

    .beh-li_cont {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(0, 0, 0, 0.31);
      padding: 9px 8px 6px 17px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #fff;
      font-style: normal;

      .beh-li_icon {
        width: 22px;
        height: 22px;
      }
    }
  }
}

.elect-alarm_list {
  padding: 0 21px 4px;
  margin-top: 8px;

  .elect-alarm_li {
    background: #0E233E;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    justify-content: space-between;
    padding: 14px 11px 18px 12px;

    &.elect-alarm_li:last-child {
      margin-bottom: 0;
    }

    .alarm-li_left {
      display: flex;
      align-items: center;

      .alarm-li_img {
        width: 60px;
        height: 60px;
        margin-right: 17px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .alarm-tit {
      display: flex;

      em {
        border-radius: 4px;
        padding: 1px 6px 3px 4px;
        font-style: normal;
        text-align: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #fff;
        font-style: normal;
      }

      span {
        margin-left: 5px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #0BE8F6;
        font-style: normal;
      }
    }

    .alarm-tit_desc {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #fff;
      font-style: normal;
      margin-top: 5px;
    }

    .alarm-li_date {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #fff;
      font-style: normal;
      text-align: right;
    }
  }
}

.alarm-red {
  background: #F7581F;
}

.alarm-yellow {
  background: #F7931F;
}

.beh-month {
  margin-top: 26px;

  .beh-month_bg {
    padding: 40px 12px;
  }
}

.beh-month_unit {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 18px;
  color: #fff;
  font-style: normal;
  padding-left: 9px;
  margin-top: 30px;
}

:deep(.beh-checkbox .el-checkbox__inner) {
  border-radius: 50%;
  border: 1px solid #11FCFE;
  background-color: rgba(255, 255, 255, 0);
}

:deep(.beh-checkbox .el-checkbox__input.is-checked .el-checkbox__inner:after) {
  border-color: #11FCFE;
}

:deep(.beh-checkbox .el-checkbox__input.is-checked+.el-checkbox__label), :deep(.beh-checkbox .el-checkbox__label) {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.74);
  font-style: normal;
}

.public-type {
  background: url("@/assets/list-tit18.png") no-repeat;
}

.public-monthAlarm {
  background: url("@/assets/list-tit19.png") no-repeat;
}

.public-video {
  background: url("@/assets/list-tit20.png") no-repeat;
}

.public-alarm {
  background: url("@/assets/list-tit21.png") no-repeat;
}

.beh-type_cont, .beh-month_cont {
  padding-left: 26px;
}

.beh-type_bg, .beh-list_cont, .beh-month_bg {
  background: linear-gradient(to top, rgba(0, 169, 255, 0.2), rgba(0, 113, 188, 0.04));
}
</style>
